<template>
    <div style="border: 1px solid black; margin: 10px; padding: 10px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="名称">
                <el-input v-model="formInline.ShelfName" clearable />
            </el-form-item>

            <el-form-item label="编码">
                <el-input v-model="formInline.ShelfCode" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="ShelfShow">查询</el-button>
                <el-button type="success" @click="shelrAdd">添加</el-button>
            </el-form-item>
        </el-form>

    </div>



    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />

        <el-table-column prop="shelfCode" label="编号" width="80" />
        <el-table-column prop="shelfName" label="名称" width="90" />
        <el-table-column prop="storehouseCode" label="仓库编码" width="80" />
        <el-table-column prop="storehouseName" label="仓库名称" width="80" />
        <el-table-column prop="shelfMsg" label="描述" width="80" />
        <el-table-column prop="addProp" label="创建人" width="80" />
        <el-table-column prop="addTime" label="创建时间" width="180">
            <template #default="script">
                {{ moment(script.row.addTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column prop="updTime" label="更新时间" width="250" />

        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default>
                <el-button link type="primary" size="small" @click="handleClick">
                    Detail
                </el-button>
                <el-button link type="primary" size="small">Edit</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="background-color:floralwhite;">
        <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
            :page-sizes="[1, 3, 5, 7]" layout="total, sizes, prev, pager, next, jumper" :total="Page.TotalCount"
            prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>


    <!-- 添加货架/库区 -->
    <el-dialog v-model="shelrAddVis" title="添加货架/库区" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="编码" prop="shelfCode">
                <el-input v-model="ruleForm.shelfCode" />
            </el-form-item>

            <el-form-item label="名称" prop="shelfName">
                <el-input v-model="ruleForm.shelfName" />
            </el-form-item>

            <el-form-item label="所属仓库" prop="storehouseId">
                <el-select v-model="ruleForm.storehouseId" placeholder="选择所属仓库">
                    <el-option v-for="item in Data" :key="item.id"
                        :label="item.storehouseCode + '/' + item.storehouseName" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="描述" prop="shelfMsg">
                <el-input v-model="ruleForm.shelfMsg" />
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    添加
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import Mesaxios from '../../Http/MesHelp'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment'

const handleClick = () => {
    console.log('click')
}

const User = reactive({
    Name: localStorage.getItem("userNickname") || ''
})

//显示 分页 查询
const tableData = ref([])

const Page = reactive({
    PageIndex: 1,
    PageSize: 3,
    TotalCount: 0,
    TotalPage: 0
})
const formInline = reactive({
    ShelfCode: '',
    ShelfName: '',
})

const ShelfShow = () => {
    Mesaxios.get("/api/Storehouse/ShelfShow", {
        params: {
            ShelfCode: formInline.ShelfCode, ShelfName: formInline.ShelfName,
            PageIndex: Page.PageIndex, PageSize: Page.PageSize
        }
    }).then(res => {
        tableData.value = res.data.data.list
        Page.TotalCount = res.data.data.count
        Page.TotalPage = res.data.data.page
        console.log(tableData.value);
    })
}

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    Page.PageSize = val;
    ShelfShow()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    Page.PageIndex = val;
    ShelfShow()
}


// 仓库列表显示
interface StorehouseItem {
    id: number
    storehouseCode: string
    storehouseName: string
}

const Data = ref<StorehouseItem[]>([])
const StorehouseGet = () => {
    Mesaxios.get("/api/Storehouse/StorehouseGet").then(res => {
        Data.value = res.data.data
        console.log(Data.value);
    })
}
// 添加
const shelrAddVis = ref(false)

const shelrAdd = () => {
    shelrAddVis.value = true;
}
interface RuleForm {
    shelfName: string
    shelfCode: string
    shelfMsg: string
    storehouseId: any
    addProp: any

}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    shelfName: '',
    shelfCode: '',
    shelfMsg: '',
    storehouseId: '',
    addProp: User.Name
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    shelfName: [
        { required: true, message: '名称不能为空', trigger: 'blur' },
    ],
    shelfCode: [
        { required: true, message: '编码不能为空', trigger: 'change' },
    ],
    shelfMsg: [
        { required: true, message: '描述不能为空', trigger: 'change' },
    ],
    storehouseId: [
        { required: true, message: '选择所属仓库', trigger: 'change' },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {

            console.log(ruleForm)

            Mesaxios.post("/api/Storehouse/ShelfAdd", ruleForm).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success("添加货架/库区成功")
                    shelrAddVis.value = true
                    ShelfShow()
                }
                else {
                    ElMessage.error("添加货架/库区失败")
                    shelrAddVis.value = true
                    ShelfShow()
                }
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

onMounted(() => {
    ShelfShow()
    StorehouseGet()
})

</script>
